import type { PropsWithChildren, ReactNode } from "react";
import ThermometerIcon from "@/assets/images/thermometer.png?jsx";
import WaterIcon from "@/assets/images/water.png?jsx";
import PressureGaugeIcon from "@/assets/images/pressure-gauge.png?jsx";
import { formatTime } from "@/lib/utils/time";

export default function Detail() {
  return (
    <div className="flex h-full justify-evenly">
      <Card>
        <Title
          icon={<ThermometerIcon className="inline-block h-8" />}
          text="温度"
        />
        <div className="flex justify-between border-b px-4 pb-2 text-center">
          <div className="">
            <div className="text-sm font-bold text-[#505153]">偏差</div>
            <div className="text-sm font-bold text-[#505153]">(实时)</div>
            <div>xxx</div>
          </div>
          <div>
            <div className="text-sm font-bold text-[#505153]">速度</div>
            <div className="text-sm font-bold text-[#505153]">(60s)</div>
            <div>xxx</div>
          </div>
          <div>
            <div className="text-sm font-bold text-[#505153]">加热</div>
            <div className="text-sm font-bold text-[#505153]">(300s)</div>
            <div>xxx</div>
          </div>
          <div>
            <div className="text-sm font-bold text-[#505153]">制冷</div>
            <div className="text-sm font-bold text-[#505153]">(60s)</div>
            <div>xxx</div>
          </div>
        </div>
        <table className="mt-4 w-full table-fixed border-collapse text-center">
          <thead>
            <tr className="bg-[#262626]">
              <th className="border border-[#2e476a] py-2 text-sm font-bold text-[#b2b9c4]">
                时间
              </th>
              <th className="border border-[#2e476a] py-2 text-sm font-bold text-[#b2b9c4]">
                箱内温度(℃)
              </th>
              <th className="border border-[#2e476a] py-2 text-sm font-bold text-[#b2b9c4]">
                操作内容
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-[#2e476a] py-2 text-sm">
                {formatTime(new Date())}
              </td>
              <td className="border border-[#2e476a] py-2 text-sm">35</td>
              <td className="border border-[#2e476a] py-2 text-sm">开始操作</td>
            </tr>
          </tbody>
        </table>
        <ul className="mt-4 px-6">
          <li>
            <span className="mr-6 text-sm font-bold text-[#7e7e7e]">
              温度采样值℃
            </span>
            <span>100.0</span>
          </li>
        </ul>
      </Card>
      <Card>
        <Title icon={<WaterIcon className="inline-block h-8" />} text="湿度" />
      </Card>
      <Card>
        <Title
          icon={<PressureGaugeIcon className="inline-block h-8" />}
          text="压力"
        />
      </Card>
    </div>
  );
}

function Card({ children }: PropsWithChildren) {
  return (
    <div className="my-4 min-w-0 flex-none basis-[30%] rounded bg-[#0e0e0e] p-2">
      {children}
    </div>
  );
}

function Title({ icon, text }: { icon: ReactNode; text: ReactNode }) {
  return (
    <div>
      {icon}
      <span className="ml-2 text-lg font-bold">{text}</span>
    </div>
  );
}
